<template>
  <a-modal
    :visible="visible"
    :title="editId ? '学校基本信息修改' : '新增学校基本信息'"
    okText="保存"
    :width="1000"
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('create') }"
  >
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="学校代码" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-input v-decorator="['xxdm',
              {
                rules: [{ required: true, message: '请输入学校代码!' }],
              }
            ]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="学校名称" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-input
              v-decorator="['xxmc',
              {
                rules: [{ required: true, message: '请输入学校代码!' }],
              }
            ]"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="拼音简码" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-input v-decorator="['pyjm']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="英文名称" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-input v-decorator="['xxywmc']"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="行政归属" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-select style="width:33%" @change="provinceChange" v-decorator="['xzqhsdm']" :allowClear="true">
              <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:33%" @change="cityChange" v-decorator="['xzqhcdm']" :allowClear="true">
              <a-select-option v-for="i in selectMenu.city" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
            <a-select style="width:33%" v-decorator="['xzqhxdm']" :allowClear="true">
              <a-select-option v-for="i in selectMenu.area" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="建校年月" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-date-picker v-decorator="['jxny']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="学校性质" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-select v-decorator="['xxxzm',
              {
                rules: [{ required: true, message: '请选择学校性质!' }],
              }]" :allowClear="true">
              <a-select-option v-for="i in selectMenu.xxxz" :key="i.code" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="办学类型" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-select v-decorator="['xxbxlxm',
              {
                rules: [{ required: true, message: '请选择学校办学类型!' }],
              }]" :allowClear="true">
              <a-select-option v-for="i in selectMenu.bxlx" :key="i.code" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="是否211工程" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-select v-decorator="['xx211gczk',
              {
                rules: [{ required: true, message: '请选择是否211工程学校!' }],
              }]" :allowClear="true">
              <a-select-option value="0">否</a-select-option>
              <a-select-option value="1">是</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="是否985工程学校" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 16}">
            <a-select v-decorator="['xx985gcyxzk',
              {
                rules: [{ required: true, message: '请选择是否985工程学校！' }],
              }]" :allowClear="true">
              <a-select-option value="0">否</a-select-option>
              <a-select-option value="1">是</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item label="学校地址" :labelCol="{span: 4,offset: 1}" :wrapperCol="{span: 19}">
            <a-input v-decorator="['xxdz']"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
// import moment from 'moment'

export default {
  props: ['visible', 'editId'],
  data () {
    return {
      detail: {},
      selectMenu: {},
      loading: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.initSelectMenu()
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.areaList(),
        this.$api.base.dictionaryData('TYPE0081'),
        this.$api.base.dictionaryData('TYPE0030')
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          province: res[0].data,
          xxxz: res[1].data,
          bxlx: res[2].data
        }
      })
    },
    saveSchool () {
      this.form.validateFields(async (err, values) => {
        console.log(values)
        if (err) {
          return
        }
        this.loading = true
        if (values.jxny) {
          values.jxny = values.jxny.format('YYYY-MM-DD h:mm:ss')
        }
        let param = Object.assign(values, {id: this.detail.id})
        this.$api.base.schoolInfoUpdate(param).then(res => {
          this.$message.success(res.msg)
        }).finally(() => {
          this.loading = false
        })
      })
    },
    provinceChange (v) {
      this.form.setFieldsValue({xzqhcdm: '', xzqhxdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'city', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'city', [])
      }
      this.$set(this.selectMenu, 'area', [])
    },
    cityChange (v) {
      this.form.setFieldsValue({xzqhxdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'area', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'area', [])
      }
    }
  }
}
</script>

<style>

</style>
